<template>
  <view class="carousel">
    <swiper class="swiper" indicator-dots autoplay :circular="true">
      <swiper-item v-for="item in bannerListData" :key="item.id">
        <navigator url="/pages/index/index" open-type="navigate" hover-class="navigator-hover">
          <image :src="item.imgUrl" mode="scaleToFill" />
        </navigator>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup lang="ts">
import type { BannerItem } from '@/services/home/types'
import { reactive, toRefs, ref, onMounted } from 'vue'
defineProps<{ bannerListData: BannerItem[] }>()
</script>
<style scoped lang="scss">
.carousel {
  height: 260rpx;
}
</style>
